<template>
  <view class="recommeSongs">
    <view class="header">
      <image src="https://img.abeim.cn/imgs/2022/09/1bb11f9400187889.jpg" mode="widthFix"></image>
      <view class="date_container">{{ new Date().getMonth() + 1 + '/' + new Date().getDate() + '   每天都要开心哦~(○^㉨^)ﾉ♪' }}</view>
    </view>
    <!-- 内容部分 -->
    <view>
      <view class="song_container">
        <text class="iconfont icon-bofangqi-bofangshu"></text>
        <text style="transform: translateX(-200rpx); line-height:70rpx; font-size:30rpx">播放全部</text>
        <text class="iconfont icon-xuanze-" style="font-size: 70rpx;"></text>
      </view>
      <scroll-view scroll-y="true" enable-flex class="scroll_container">
        <view v-for="(item, i) in recommend" :key="item.id" class="recommend_container" @click="navTosongsDetail(item.id, i)">
          <image :src="item.al.picUrl" mode="widthFix"></image>
          <view class="text">
            <text>{{ item.name }}</text>
            <text class="wyf">{{ item.ar[0].name + ' -' + item.al.name }}</text>
          </view>
          <text class="iconfont icon-gengduo-shuxiang"></text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      recommend: []
    }
  },
  onLoad() {
    this.getRecommendList()
  },
  computed: {
    // 以下两种方式都可以
    // ...mapState({ token: state => state.login.token })
    ...mapState('login', ['cookie'])
  },
  methods: {
    async getRecommendList() {
      const { data: res } = await uni.$http.get('recommend/songs', { cookie: this.cookie })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('推荐歌曲列表获取失败')
      this.recommend = res.data.dailySongs
    },
    navTosongsDetail(id, i) {
      uni.navigateTo({
        url: '/subpkg/songs_detail/songs_detail?id=' + id
      })
     setTimeout(()=>{uni.$emit('sendIndex', i)},500)
    }
  }
}
</script>

<style lang="scss" scoped>
.recommeSongs {
  height: 100vh;
}
.recommeSongs .header {
  height: 422rpx;
}
.recommeSongs .header image {
  width: 100%;
  height: 100%;
}
.date_container {
  text-align: center;
  transform: translate(0rpx, -100rpx);
  color: #344966;
  line-height: 100%;
  font-size: 42rpx;
  // width: 100%;
  height: 400rpx;
  font-weight: 520;
  font-family: '楷体';
  white-space: nowrap;
}

.song_container {
  display: flex;
  justify-content: space-between;
  // margin-top: 140rpx;
  height: 80rpx;
  position: relative;
  overflow: hidden;
  &::after {
    position: absolute;
    content: '';
    display: block;
    background: #eccfcb;
    width: 100%;
    height: 20rpx;
    bottom: 0;
    left: 0%;
    right: 0;
    top: 0;
    border-radius: 50%;
    transform: translate(0rpx, -10rpx);
  }
}
.iconfont {
  margin: 0 10rpx;
  width: 80rpx;
  height: 80rpx;
}
.icon-bofangqi-bofangshu {
  font-size: 70rpx;
}

.recommend_container {
  position: relative;
  display: flex;
  margin: 15rpx;
}
.recommend_container image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}
.text {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  // justify-content: flex-start;
  // align-items: flex-start;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.text .wyf {
  color: #808080;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 15rpx;
  max-width: 400rpx;
}
.scroll_container {
  height: calc(100vh - 380rpx);
}
.icon-gengduo-shuxiang {
  position: absolute;
  right: 0;
  margin: 0 -20rpx;
  line-height: 100rpx;
  height: 100rpx;
}
</style>
